<!-- 逻辑 -->
  <script setup lang="ts">
 //ref 可以配合简单数据类型和复杂数据类型   推荐使用

  //1.导入ref函数
  import { ref } from "vue"
  //2.将普通变量改为状态变量
  const food=ref('隆江猪脚饭')
  //在script里面是使用需要.value
  const addfood=()=>{
    food.value+='叉烧'
  }

  //ref + 复杂数据类型
 const rice=ref({
  name: '米饭',
  food: ['盐', '酱油', '白糖', '辣椒酱'],
  sup: '酱油汤',
  price: 50
 })

 const addrice=()=>{
  rice.value.food.push('澳龙')
 }
 

</script>
<!-- 结构 -->
<template>
  <!--  修改数据-template 中 直接改 -->
  <h1 @click="addfood">{{ food }}</h1>
 <button @click="food+='烧鸭腿'">烧鸭腿</button>
<h2 @click="addrice">
{{ rice }}
</h2>

<button @click="rice.food+='鸡腿'"></button>



 </template>
<!-- 样式 -->
<style>

</style>
